<template>
	<div>
		<Navigation></Navigation>
		<!-- 详情模块 -->
		<div class="top">
			<!-- 左部图片 -->
			<div class="topleft">
				<img class="bigtp" :src='firstimg' alt="">
				<div class="lefttpbox">
					<img :src="el" alt="" v-for="(el,index) in imgs" @mouseenter="changeimg(index)">
				</div>
			</div>
			<!-- 右部价格 -->
			<div class="topright">
				<div class="type1">{{arr1[0].carname}}</div>
				<div class="type2">{{arr1[0].shift}}|乘坐{{arr1[0].peopel}}人</div>
				<hr>
				<div class="type3">价格：<span>￥{{arr1[0].price}}元/天</span></div>
				<hr>
				<!-- <el-button type="danger"  @click="dialogVisible = true">立即预定</el-button> -->
				

    <!-- Form -->
    <el-button @click="dialogFormVisible = true" type="danger"
      >立即预定</el-button
    >
  
    <el-dialog v-model="dialogFormVisible" title="资费信息确认表">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" placeholder="张三" autocomplete="off" />
        </el-form-item>
		<el-form-item label="电话" :label-width="formLabelWidth">
		  <el-input v-model="form.tel" placeholder="187******02" autocomplete="off" />
		</el-form-item>
		<el-form-item label="邮箱" :label-width="formLabelWidth">
		  <el-input v-model="form.email2" placeholder="187******02@163.com" autocomplete="off" />
		</el-form-item>
		<el-form-item label="地址" :label-width="formLabelWidth">
		  <el-input v-model="form.adress" placeholder="成都市XX区XX街道XX" autocomplete="off" />
		</el-form-item>
		<el-form-item label="租车天数(/天)" :label-width="formLabelWidth">
		  <el-input v-model="form.day" placeholder="XX天" autocomplete="off" />
		</el-form-item>
		<el-form-item label="资费价格(元/天)" :label-width="formLabelWidth">
		  <el-select v-model="form.money" :placeholder="arr1[0].price">
		    <el-option :label="arr1[0].price" :value="arr1[0].price" />
		  </el-select>
		</el-form-item>
		
      </el-form>
      <template #footer>
        <span class="dialog-footer">
			<el-button type="primary" @click="submit(form)">立即预定</el-button>
          <!-- <el-button @click="dialogFormVisible = false">取消</el-button> -->

        </span>
      </template>
    </el-dialog>
				
				<div class="cardetail">
					<h2>车辆参数</h2>
					<table>
						<tr>
							<td>排量：{{arr1[0].displacement}}T</td>
							<td>燃油类型：{{arr1[0].fuel}}</td>
						</tr>
						<tr>
							<td>天窗：{{arr1[0].skylight}}</td>
							<td>座位数：{{arr1[0].peopel}}个</td>
						</tr>
						<tr>
							<td>车门数：{{arr1[0].door}}门</td>
							<td>油箱容积：{{arr1[0].volume}}</td>
						</tr>
					</table>
				</div>

			</div>
		</div>
		<div style="clear: both;"></div>
		<!-- 标签页 -->
		<div class="middle">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="车辆详情" name="first">
					<!-- 懒加载 -->
					<div class="demo-image__lazy ">
						<el-image v-for="url in urls" :key="url" :preview-src-list="srcList" :src="url" lazy></el-image>
					</div>

				</el-tab-pane>
				<el-tab-pane label="租车流程" name="second">
					<img class="twoimg" src="./img/detail/liucheng.png" alt="">
					<pre>个人名义租车：


1、约定租赁车型、租车行程安排，商议租车价格。

2、提供租客本人的身份证、驾驶证原件，并支付押金。

3、客户与工作人员共同验证确认车辆并签订租车合同。

4、使用车辆。

5、退还车辆，并与工作人员共同验证车辆。

6、结算租车费用并退还押金。



企业名义租车：


1、约定租赁车型、租车行程安排，商议租车价格。

2、提供加盖企业鲜章的营业执照复印件、组织机构代码证复印件和经办人身份证及驾驶证原件，并支付押金。

3、客户与工作人员共同验证确认车辆并签订租车合同。

4、使用车辆。

5、退还车辆，并与工作人员共同验证车辆。

6、结算租车费用并退还押金。
</pre>
					<pre class="prered">注：

1、自驾车辆在费用结算时会冻结3000元的违章押金，通常30个工作日之后若无违章，则自动解除冻结。

2、如果使用本公司司机代驾服务，则无需支付押金，只需支付租金即可。</pre>
				</el-tab-pane>
				<el-tab-pane label="租车问答" name="third">
					<div class="wen">
						<span>问:</span>
						<div>我想租车，需要具备什么条件才可以？</div>
					</div>
					<div class="da">
						<span>答:</span>
						<div>官方回复：（1）年龄在18周岁（含）以上；（2）拥有大陆地区有效驾驶证且驾龄满1年以上；（3）提供本人中华人民共和国第二代身份证。
						</div>

					</div>
					<br><br><br><br><br><br><br><br><br><br><br><br>
				</el-tab-pane>
			</el-tabs>
		</div>

		<Liucheng></Liucheng>
		<Footer1></Footer1>
	</div>
</template>

<script setup>
	// import { ElMessage } from "element-plus";
	import { ElButton, ElDialog,ElMessage } from 'element-plus'
	import { CircleCloseFilled } from '@element-plus/icons-vue'
	import {
		reactive,
		ref,
		onBeforeMount,
		 onMounted,
		getCurrentInstance,
	} from 'vue';
	//图片大图及小图
	let imgs = reactive([])
	// imgs.push(arr1[0].img[0])
	let firstimg = ref("")
	let changeimg = function(index) {
		firstimg.value = imgs[index]
	}
	//懒加载图片
	let urls = reactive([])
	let srcList = reactive([])
	
	//接收传参
		import {useRoute} from "vue-router" //引入
		let route=useRoute()
		 // console.log(route.query)//如果是params传参就用route.params接收
	// 后端数据
	
	 
		let arr1=reactive([]) //和vue2一样，请求数据时需要提前用一个空数组装
	 
		const {proxy} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
	  
	  	 onBeforeMount( async()=>{
			 if(arr1==false){
				 let res=await proxy.$axios('cartype',{params:{id:route.query.id}}) //使用公共配置的$axios进行axios请求
				 //因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
				 //此时会进行代理 转变为http://127.0.0.1:7001/test
				  arr1.push(...res.data) //将请求的数据添加到外部的arr1中
				  // console.log(arr1,1111111111111111111111111111111111111)	
				  
				  //处理 图片路径问题
				  let VehicleCarArry=[]
				  let aa=[]
				  let bb=[]
				  let LiveactionArry=[]
				  let cc=[]
				  let dd=[]
				 arr1.forEach((el,index)=>{
				 	//放大缩小
				 		VehicleCarArry[index]=el.VehicleCar.split("---")
				 		aa[index]=VehicleCarArry[index].join('http://localhost:7001')
				 		bb[index]=aa[index].split(",")
				 		bb[index].pop()
				 	    el.img=bb[index]
				     // 下方展示
				 	    LiveactionArry[index]=el.Liveaction.split("---")
				 	    cc[index]=LiveactionArry[index].join('http://localhost:7001')
				 	    dd[index]=cc[index].split(",")
				 	    dd[index].pop()
				 	    el.img2=dd[index]
				 })  
				 //设则图片
				    imgs.push(...arr1[0].img)
				    firstimg.value=arr1[0].img[0]
				    
				    urls.push(...arr1[0].img2)
				    srcList.push(...arr1[0].img2)
				    // console.log(arr1)
			 }
	  	 	
	  	 })	
 
     //       onMounted(()=>{
			  //  arr1.pop()
			  //  console.log(arr1,333333333333)
		   // })
         

//立即预定事件
	
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  name: '',
  tel:'',
  email2:'',
  adress:'',
  money:'',
  day:'',
  id:route.query.id
})

let submit=async function(form){
	console.log(form,66666)
	// alert("发送成功")
	let res2=await proxy.$axios('yudin',{params:form})
	console.log(res2.data.code)
    form.email='lsy1626128667@163.com'
	if(res2.data.code==200){
		// alert("提交成功！我们会尽快与您取得联系！")
		
		 let res5 = await proxy.$axios.post("./yudincontent", form);
		 console.log(form.email)
		 ElMessage({
		   message: "提交成功！我们会尽快与您取得联系！",
		   type: "success",
		 });
	}else if(res2.data.code==100){
	    // alert("您还未登录，请先登录！")
		ElMessage.error("您还未登录，请先登录！");
		setTimeout(()=>{
			window.open('/#/login')
		},1000)
	}
	
}

  
     
    


	//默认标签页
	let activeName = ref('first')
	console.log(activeName.value)
	let handleClick = function(tab, event) {
		// console.log(tab, event);
	}


	

</script>

<style lang="scss" scoped>
     //模态弹窗
	.el-button--text {
	  margin-right: 15px;
	}
	.el-select {
	  width: 300px;
	}
	.el-input {
	  width: 300px;
	}
	.dialog-footer button:first-child {
	  margin-right: 10px;
	}
	 //...
	.top {
		cursor: default;
		padding: 20px;
		width: 1120px;
		height: 600px;
		background-color: #f7f7f7;
		margin: 0 auto;
		margin-bottom: 20px;

		.topleft {
			float: left;
			width: 600px;
			height: 600px;

			// background-color: aquamarine;
			.bigtp {
				width: 600px;
				height: 450px;
			}

			.lefttpbox {
				width: 600px;

				// background-color: yellow;
				img {
					cursor: pointer;
					margin-right: 20px;
					width: 160px;
					height: 100px;
					margin-top: 20px;
				}
			}
		}

		.topright {
			float: right;
			width: 500px;
			height: 600px;
			// background-color: azure;
			line-height: 30px;

			// text-align: center;
			hr {
				width: 400px;
			}

			.type1 {
				font-size: 25px;
				font-weight: 600;
			}

			.type2 {
				color: #636363;
				font-size: 16px
			}

			.type3 {
				margin-top: 20px;
				color: #272727;

				span {
					font-size: 30px;
					color: #e02626;
				}
			}

			.el-button {
				width: 400px;
				height: 50px;
				margin-top: 20px;
			}

			.cardetail {
				width: 520px;
				height: 400px;

				// background-color: yellow;
				h2 {
					padding-top: 30px;
					padding-bottom: 15px;
					font-weight: normal;
				}

				table {
					border-spacing: 1px;
					background-color: #b6b6b6;

					// margin: 80px auto 10px auto;
					tr {
						td {
							width: 240px;
							height: 60px;
							background-color: white;
							font-weight: 600;
							color: #6e6969;
							padding-left: 10px;
						}
					}
				}
			}

		}
	}

	//标签页
	.middle {
		width: 1120px;
		// height: 500px;
		padding: 20px;
		margin: 0 auto;
		background-color: #f7f7f7;
    
		.el-tab-pane {
			text-align: center;
			::v-deep .el-image__inner{
				width: 1000px;
			}
		}

		//第二个标签页
		pre {
			cursor: default;
			text-align: left;
			margin-top: 30px;
			margin-left: 240px;
			width: 200px;
			font-size: 16px;
			font-weight: 800;
			color: #6e6969;
			// background-color: pink;
		}

		.prered {
			color: red;
			padding-bottom: 40px;
			font-weight: 600;
		}

		//第三个标签页
		.wen {
			cursor: default;
			width: 800px;
			height: 60px;

			margin: 0 auto;
			text-align: left;
			font-size: 16px;
			font-weight: 500;
			color: #504646;

			span {
				background-color: #b6b6b6;
			}
		}

		.da {
			cursor: default;
			width: 800px;
			height: 60px;
			// background-color: pink;
			margin: 0 auto;
			text-align: left;
			font-size: 16px;
			font-weight: 500;
			color: #504646;

			span {
				background-color: #e50000;
			}
		}
	}
</style>
